<template>
	<el-container>
		<sidebar :index="0"></sidebar>
		<el-main>
			<div class="coupon-list relative" v-if="">
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane :label="$t('coupon.coupon.title1')" name="active"></el-tab-pane>
					<el-tab-pane :label="$t('coupon.coupon.title2')" name="completed"></el-tab-pane>
					<el-tab-pane :label="$t('coupon.coupon.title3')" name="expired"></el-tab-pane>
				</el-tabs>
				<div class="go-mgm" @click="goMgm">{{$t('coupon.nav1')}}</div>
				<coupon-table :act="activeName"></coupon-table>
			</div>
		</el-main>
	</el-container>
</template>

<script>
import couponTable from './component/couponTable.vue';
import sidebar from './component/sidebar.vue';
import { getCouponList } from '@/api/c'

export default {
  components: { couponTable, sidebar },
  name: 'couponIndex',
  data() {
    return {
		activeName: 'active' //券分类列表，当前哪个分类
    }
  },
	methods: {
		handleClick() {
			
		},
		goMgm() {
			window.location.href = '/?_='+new Date()*1+'#/coupon/mgm'
		}
	},
	created() {
	  
	}
}
</script>

<style  scoped>
p {
	margin: 0;
}
li {
	list-style: none;
}
.app-main .el-container {
	width: 1280px;
}
.coupon-list {
	width: 898px;
	margin: 32px auto;
	border: 1px solid #EBEDF8;
	padding: 32px 36px;
	background: #ffffff;
}

	.el-main {
		background: #FAFBFC;
	}

	.coupon-list .go-mgm {
		display: inline-block;
		width: 156px;
		height: 24px;
		line-height: 24px;
		text-align: center;
		background: #3DBDB6;
		font-size: 12px;
		color: #FFFFFF;
		position: absolute;
		right: 38px;
		top: 41px;
	}
	.go-mgm:hover {
		opacity: 0.7;
	}
</style>
<style type="text/css">
	.coupon-list .el-tabs__item.is-active, .coupon-list .el-tabs__item:hover{
		color: #3DBDB6;
	}
	.coupon-list .el-tabs__active-bar {background: #3DBDB6}
</style>
